<template>
	<view class="jhnmjxert">
		<view class="pr">
			<view class="cen">
				<image src="../../html/img/usericon.png" mode="widthFix" class="yj usericonsd cz"></image>
				<view class="mt10 cf fz32">
					lexus
				</view>
			</view>
			<view class="mt50 pd">
				<view class="fz32 ye ">
					限时优惠套餐
				</view>
				<image src="../../static/img/dsfdsadfdsa.jpg" mode="widthFix" class="w100 mt30"></image>
				<view class="fz32 ye mt100">
					VIP会员套餐
				</view>
			</view>

			<scroll-view scroll-x class="mt30 jinhgbxdff pl30 pr30">
				<view class="f_b jjnkjnnxer cen cz" :class="idxse==0?'act':''" @tap="jjhhbsd(0)">
					<text class="jjhnnxerse" v-if="idxse==0">首年优惠</text>
					<view class=" ye fz30 mt30">
						一年会员
					</view>
					<view class="fz30 ye mt20">
						￥<text class="fz60">118</text>
					</view>
					<view class="fz22 z9 jjhjnxert mt30">
						到期自动续费 可随时取消
					</view>
				</view>

				<view class="f_b jjnkjnnxer cen cz" :class="idxse==1?'act':''" @tap="jjhhbsd(1)">
					<text class="jjhnnxerse" v-if="idxse==1">首年优惠</text>
					<view class=" ye fz30 mt30">
						两年会员
					</view>
					<view class="fz30 ye mt20">
						￥<text class="fz60">618</text>
					</view>
					<view class="fz22 z9 dsfrzwer">
						￥800
					</view>
					<view class="fz22 ye mt20">
						立减200元
					</view>
				</view>


				<view class="f_b jjnkjnnxer cen cz" :class="idxse==2?'act':''" @tap="jjhhbsd(2)">
					<text class="jjhnnxerse" v-if="idxse==2">首年优惠</text>
					<view class=" ye fz30 mt30">
						终身会员
					</view>
					<view class="fz30 ye mt20">
						￥<text class="fz60">1198</text>
					</view>
					<view class="fz22 z9 dsfrzwer">
						￥1598
					</view>
					<view class="fz22 ye mt20">
						立减400元
					</view>
				</view>
			</scroll-view>
			<view class="pd mt60 cf fz22 fgteettwre">
				注：点击购买/续费视为您已阅读并同意用户协议、隐私协议 *本产品为虚拟内容服务，开通后将无法退款，请您理解
			</view>
		</view>
		<view class="sdfsdtxzweer">
			立即开通
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				idxse: 0
			}
		},
		components: {},
		methods: {
			jjhhbsd (idx) {
				this.idxse = idx
			}
		},
		mounted() {}
	}
</script>
<style scoped>
	.usericonsd {
		width: 100upx;
		height: 100upx;
	}

	.ye {
		color: #AD968A !important;
	}

	.jinhgbxdff {
		white-space: nowrap;
	}

	.jjnkjnnxer {
		position: relative;
		width: 228upx;
		height: 292upx;
		background: linear-gradient(180deg, rgba(53, 60, 81, 1) 0%, rgba(36, 41, 57, 1) 100%);
		border-radius: 12upx;
		margin-right: 28upx;

	}

	.jjhjnxert {
		white-space: normal;
		padding-left: 30upx;
		padding-right: 30upx;
	}

	.dsfrzwer {
		text-decoration: line-through;
	}

	.jjnkjnnxer.act {
		background: rgba(229, 199, 183, 1);
		border: 4upx solid rgba(178, 130, 104, 1);
	}

	.jjnkjnnxer.act .ye {
		color: #6E3517 !important;
	}

	.jjnkjnnxer.act .z9 {
		color: #6E3517 !important;
	}

	.jjhnnxerse {
		position: absolute;
		left: 0upx;
		top: -10upx;
		line-height: 44upx;
		background: rgba(178, 130, 104, 1);
		border-radius: 6upx 6upx 20upx 6upx;
		color: #6E3517;
		font-size: 22upx;
		padding: 0 20upx;
	}
	.fgteettwre{
		line-height: 1.6;
	}
	.jhnmjxert{
		padding-bottom: 200upx;
	}
	.sdfsdtxzweer{
		height:100upx;
		line-height: 100upx;
		background:rgba(229,199,183,1);
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		font-size: 36upx;
		text-align: center;
		z-index: 100;
		color: #6E3517;
	}
</style>
